<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../element/index.css">
    <!-- 引入组件库 -->
    <script src="../../element/index.js"></script>
    <link rel="stylesheet" href="../../element/ico.css">
    <title>Document</title>
</head>

<body>
    <div>
        <h2>用户信息列表</h2>
        <div id="app">
            <!-- 按钮--添加联系人 -->
            <el-button type="primary" @click="addperson">添加联系人</el-button>
            <!-- 搜索框 -->
            <div style="margin-top: 15px;">
                <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>
            <!-- 表格 -->
            <el-table :data="tableData.slice((currentPage1-1)*PageSize,PageSize*currentPage1)" style="width: 100%">
                <el-table-column label="编号" width="180">
                    <template slot-scope="scope">
                   <span>{{ scope.$index+1}}</span>
               </template>
                </el-table-column>
                <el-table-column label="姓名" width="180">
                    <template slot-scope="scope">
                   <span >{{ scope.row.name }}</span>
               </template>
                </el-table-column>
                <el-table-column label="性别" width="180">
                    <template slot-scope="scope">
                   <span >{{ scope.row.sex }}</span>
               </template>
                </el-table-column>
                <el-table-column label="年龄" width="180">
                    <template slot-scope="scope">
                   <span >{{ scope.row.age }}</span>
               </template>
                </el-table-column>
                <el-table-column label="籍贯" width="180">
                    <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>姓名: {{ scope.row.name }}</p>
              <p>住址: {{ scope.row.selectedAddress }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.selectedAddress }}</el-tag>
              </div>
            </el-popover>
          </template>
                </el-table-column>
                <el-table-column label="QQ" width="180">
                    <template slot-scope="scope">
                   <span >{{ scope.row.qq }}</span>
               </template>
                </el-table-column>
                <el-table-column label="邮箱" width="180">
                    <template slot-scope="scope">
                   <span >{{ scope.row.Email }}</span>
               </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage1" :page-size="PageSize" layout="total, prev, pager, next" :total="totalCount">
            </el-pagination>

            <!-- 弹出框--表单 -->
            <!-- Form -->
            <el-dialog title="添加联系人页面" :visible.sync="dialogFormVisible">
                <el-form ref="formData" :model="formData" label-width="80px">
                    <el-form-item label="姓名">
                        <el-input v-model="formData.name"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-radio-group v-model="formData.sex">
                            <el-radio label="男"></el-radio>
                            <el-radio label="女"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="年龄">
                        <el-input v-model="formData.age"></el-input>
                    </el-form-item>
                    <el-form-item label="籍贯">
                        <el-select v-model="formData.selectedAddress" placeholder="请选择活动区域">
                            <el-option label="安徽" value="安徽"></el-option>
                            <el-option label="湖北" value="湖北"></el-option>
                            <el-option label="北京" value="北京"></el-option>
                            <el-option label="上海" value="上海"></el-option>
                            <el-option label="上海" value="重庆"></el-option>
                            <el-option label="上海" value="西安"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="QQ">
                        <el-input v-model="formData.qq"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="formData.Email"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">立即创建</el-button>
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>
    <script>
        var a = new Vue({
            el: '#app',
            data() {
                return {
                    tableData: [],
                    pagination_data: [],
                    dialogFormVisible: false,
                    formData: {
                        name: '',
                        sex: '',
                        age: null,
                        selectedAddress: [],
                        qq: '',
                        Email: '',
                    },
                    formLabelWidth: '120px',
                    count: 0,
                    bnt_num: 0,
                    currentPage1: 1,
                    // 默认每页显示的条数（可修改）
                    PageSize: 3,
                    totalCount: 1,
                    input3: '',
                }
            },
            methods: {

                addperson: function() {
                    this.dialogFormVisible = !this.dialogFormVisible;
                    this.count = 0;
                },
                onSubmit() {
                    if (this.count == 0) {
                        this.tableData.push({...this.formData
                        })
                        this.totalCount = this.tableData.length;
                    } else {
                        //Vue.set( target , key , value) --target: 要更改的数据源（可以是一个对象或者数组）,key 要更改的具体数据 （索引）,value 重新赋的值
                        this.$set(this.tableData, this.bnt_num, this.formData);
                        // this.tableData[this.bnt_num] = {...this.formData
                        // };
                        console.log(this.bnt_num)
                        console.log(this.tableData[this.bnt_num].sex)
                    }
                    this.dialogFormVisible = !this.dialogFormVisible;
                    this.formData = {
                        name: '',
                        sex: '',
                        age: null,
                        selectedAddress: '',
                        qq: '',
                        Email: ''
                    }
                },
                handleEdit: function(index, row) {
                    this.dialogFormVisible = !this.dialogFormVisible;
                    this.formData = {...row
                    };

                    console.log(row.name)
                        // console.log(row.sex)
                    this.count++;
                    this.bnt_num = this.PageSize * (this.currentPage1 - 1) + index;
                    debugger
                    console.log(index)
                },
                handleDelete(index, row) {
                    this.tableData.splice(index, 1);
                },
                handleSizeChange(val) {
                    this.PageSize = val;
                    this.currentPage = 1;
                    console.log(`每页 ${val} 条`);
                },
                handleCurrentChange(val) {

                    this.currentPage1 = val;
                    console.log(`当前 ${val} 页`)
                }
            }
        })
    </script>

</body>

</html>